<template>
  <view class="exp-filter">
    <view
      class="exp-item u-border-bottom"
      v-for="(item, index) in expList"
      :key="index"
      @click="handleExpList(item)"
      >{{ item.label }}</view
    >
    <view class="exp-item">
      <view class="input">
        <input v-model="exp[0]" :focus="focus" @focus="focus = true" type="number" placeholder="最小年限" />
        <text class="divider">-</text>
        <input v-model="exp[1]" :focus="focus2" @focus="focus2 = true" type="number" placeholder="最大年限" />
      </view>
      <u-button size="medium" type="primary" @click="handleExpInput"
        >确定</u-button
      >
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: Array,
    isDropdown: Boolean,
  },
  data() {
    return {
      expList: [
        {
          label: "不限",
          value: 0,
        },
        {
          label: "应届毕业生",
          value: 1,
        },
      ],
      exp: ["", ""],
      focus: false,
      focus2: false,
    };
  },
  watch: {
    data: {
      handler(val) {
      },
      immediate: true,
      deep: true
    },
    isDropdown(val) {
      if (!val) {
        setTimeout(() => {
          this.focus = false;
          this.focus2 = false;
        }, 500);
      }
    } 
  },
  methods: {
    handleExpList(item) {
      if (item.value) {
        this.$emit("filter", {
          minExp: 0,
          maxExp: 1,
        });
      } else {
        this.$emit("filter", {
          minExp: "",
          maxExp: "",
        });
      }
      
    },
    handleExpInput() {
      // if (+this.exp[0] > +this.exp[1]) {
      //   return uni.showToast({ icon: "none", title: "工作经验输入错误", duration: 2000 });
      // }
      this.$emit("filter", {
        minExp: this.exp[0],
        maxExp: this.exp[1],
      });
    },
  },
};
</script>

<style lang="scss">
.exp-filter {
  .exp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26rpx 32rpx;
    font-size: $uni-font-size-base;
    line-height: 54rpx;
    color: $uni-text-color-555;
    background-color: $uni-bg-color;
    box-sizing: border-box;
    .input {
      display: flex;
      align-items: center;
      .divider {
        margin: 0 12rpx;
      }
      input {
        padding: 0 16rpx;
        width: 160rpx;
        height: 54rpx;
        background: $uni-bg-color-grey;
        font-size: $uni-font-size-base;
        border-radius: 12rpx;
        text-align: center;
      }
    }
    button {
      flex-shrink: 0;
      margin: 0;
      padding: 0 32rpx;
      height: 54rpx;
      line-height: 54rpx;
      border-radius: 12rpx !important;
    }
  }
}
</style>
